<template>
  <div class="order-detail">
    <el-button class="back-btn" type="primary" @click="back">返回</el-button>
    <el-tabs
      v-model="data.activeTab"
      class="demo-tabs"
      @tab-click="handleClickTab"
    >
      <el-tab-pane label="基本信息" name="info">
        <div class="order-wrap">
          <el-steps :active="2" align-center process-status="wait">
            <el-step
              title="准备充电"
              :description="
                data.detailData.startTime ? data.detailData.startTime : '--'
              "
            />
            <el-step
              title="开始充电"
              :description="
                data.detailData.startTime ? data.detailData.startTime : '--'
              "
            />
            <el-step title="结束充电" description="" />
            <el-step title="订单支付" description="" />
          </el-steps>
          <div class="order-reason">
            <div class="order-no">
              充电单号：{{
                data.detailData.startChargeSeq
                  ? data.detailData.startChargeSeq
                  : '--'
              }}
            </div>
            <div class="reason">
              订单结束原因：{{
                data.detailData.stopMsg ? data.detailData.stopMsg : '--'
              }}
            </div>
          </div>
          <div class="price-card">
            <div class="card-data left">
              <div class="card-data">
                <div class="card-item">
                  <div class="title">订单总金额</div>
                  <div class="card-value">
                    ￥{{
                      data.detailData.totalMoney
                        ? data.detailData.totalMoney
                        : '--'
                    }}
                  </div>
                </div>
                <div class="card-item">
                  <div class="title">订单总优惠</div>
                  <div class="card-value">
                    ￥{{
                      data.detailData.discountAmount
                        ? data.detailData.discountAmount
                        : '--'
                    }}
                  </div>
                </div>
                <div class="card-item card-item1">
                  <div class="content-title">
                    <div class="title">实收金额</div>
                    <div class="card-value card-value1">
                      ￥{{
                        data.detailData.totalAmount
                          ? data.detailData.totalAmount
                          : '--'
                      }}
                    </div>
                  </div>
                  <div class="fee">
                    <div class="electric-charge">
                      电费：￥{{
                        data.detailData.elecMoneyActual
                          ? data.detailData.elecMoneyActual
                          : '--'
                      }}
                    </div>
                    <div class="service-charge">
                      服务费：￥{{
                        data.detailData.serviceMoneyActual
                          ? data.detailData.serviceMoneyActual
                          : '--'
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right"></div>
          </div>
          <div class="order-info">
            <Detail
              :columns="2"
              :form="detailForm"
              :detail="data.detailData"
              align="right"
              class="order-detail"
            ></Detail>
          </div>
          <Head title="充电信息">
            <template #content>
              <div class="order-info">
                <Detail
                  :columns="2"
                  :form="detailForm1"
                  :detail="data.detailData"
                  align="right"
                ></Detail>
              </div>
            </template>
          </Head>
        </div>
      </el-tab-pane>
      <el-tab-pane label="实时数据（列表）" name="tableData" v-if="env_type">
        <Table
          v-if="data.activeTab === 'tableData'"
          ref="tableDataRef"
          :columns="tableData.columns"
          @get-list="getList"
        ></Table>
      </el-tab-pane>
      <el-tab-pane label="实时数据（图表）" name="charts" v-if="env_type">
        <div v-if="data.activeTab === 'charts'">
          <div class="charts-box1">
            <QcEchart
              :options="
                getLineChart(
                  '需求/输出电压',
                  data.chartsData,
                  '电压',
                  'V',
                  '1',
                  data.chartsType
                )
              "
              :isData="data.isData"
              class="charts-warp"
            ></QcEchart>
          </div>
          <div class="charts-box2">
            <QcEchart
              :options="
                getLineChart(
                  '需求/输出电流',
                  data.chartsData,
                  '电流',
                  'A',
                  '2',
                  data.chartsType
                )
              "
              :isData="data.isData"
              class="charts-warp"
            ></QcEchart>
          </div>
          <div class="charts-box3">
            <QcEchart
              :options="getGunLineChart('枪线温度', data.chartsGunData, '℃')"
              class="charts-warp"
              :isData="data.isData"
            ></QcEchart>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
  
<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import Table from '@/components/table/index.vue';
import QcEchart from '@/components/qcEchart/index.vue';
import { getLineChart, getGunLineChart } from '@/utils/chartOption';
import {
  getCurrentOrder,
  getHistoryChargeData,
  getHistoryChargePageData,
  getHistoryChargeExtendData,
} from '@/service/apis/order';
const route = useRoute();
const router = useRouter();
const {
  query: { id },
} = route;

const env_type = import.meta.env.VITE_ENV_TYPE !== 'ryc';
let data = reactive({
  detailData: {} as any,
  activeTab: 'info',
  startChargeSeq: '',
  chartsData: [] as any,
  chartsGunData: [] as any,
  chartsType: '',
  isData: true,
});
const detailForm = reactive([
  {
    label: '用户姓名',
    prop: 'userName',
  },
  {
    label: '用户账号',
    prop: 'accountNumber',
  },
  {
    label: '充电卡号',
    prop: 'cardNum',
  },
  {
    label: '归属企业',
    prop: 'orgName',
  },
  {
    label: '充电车辆',
    prop: 'plateNumber',
  },
  {
    label: '车辆VIN码',
    prop: 'chargeVin',
  },
  {
    label: '流量方流水号',
    prop: 'flowStartChargeSeq',
  },
  {
    label: '运营商流水号',
    prop: 'operatorSerialNumber',
  },
  {
    label: '终端编码',
    prop: 'connectorCode',
  },
  {
    label: '电桩功率',
    prop: 'power',
  },
  {
    label: '电站名称',
    prop: 'stationName',
  },
  {
    label: '运营商',
    prop: 'operatorName',
  },
]);
let tableData = reactive({
  columns: [
    {
      prop: 'dataTime',
      label: '上送时间',
    },
    {
      prop: 'totalPower',
      label: '充电度数（度）',
      template: (row: any) => {
        return row?.totalPower?.toString() || '--';
      },
    },
    {
      prop: 'chargedTime',
      label: '充电时长（分钟）',
      template: (row: any) => {
        return row?.chargedTime?.toString() || '--';
      },
    },
    {
      prop: 'soc',
      label: '当前SOC(%)',
      template: (row: any, index: number) => {
        return row?.soc?.toString() || '--';
      },
    },
    {
      prop: 'totalMoney',
      label: '已充金额（元）',
      template: (row: any, index: number) => {
        return row?.totalMoney?.toString() || '--';
      },
    },
    {
      prop: 'voltage',
      label: '电压（V）',
      template: (row: any, index: number) => {
        return row?.voltage?.toString() || '--';
      },
    },
    {
      prop: 'current',
      label: '电流（A）',
      template: (row: any, index: number) => {
        return row?.current?.toString() || '--';
      },
    },
    {
      prop: 'gunTemperature',
      label: '枪线温度（℃）',
      template: (row: any, index: number) => {
        return row?.gunTemperature?.toString() || '--';
      },
    },
    {
      prop: 'batteryTemperature',
      label: '电池温度（℃）',
      template: (row: any, index: number) => {
        return row?.batteryTemperature?.toString() || '--';
      },
    },
  ],
});

const detailForm1 = reactive([
  {
    label: '已充电量',
    prop: 'totalPower',
    template: (row: any, index: number) => {
      if (row.totalPower == 0) {
        return `${row.totalPower.toString()}度`;
      } else {
        return row.totalPower ? `${row.totalPower}度` : '--';
      }
    },
  },
  {
    label: 'SOC',
    prop: 'soc',
    template: (row: any, index: number) => {
      if (row.soc == 0) {
        return `${row.soc.toString()}%`;
      } else {
        return row.soc ? `${row.soc}%` : '--';
      }
    },
  },
  {
    label: '充电状态',
    prop: 'charging',
    template: (row: any, index: number) => {
      return row.charging ? '充电中' : '未充电';
    },
  },
  {
    label: '已充时间',
    prop: 'chargedTime',
  },
]);

getCurrentOrder(Number(id)).then((res: any) => {
  if (res) {
    data.detailData = res;
    data.startChargeSeq = res.startChargeSeq;
  }
});

// 获取实时数据
let tableDataRef = ref();
const getList = (page: any) => {
  getHistoryChargePageData(data.startChargeSeq, page).then((res: any) => {
    if (res) {
      console.log('res---', res);
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getList(page);
        return;
      }
      nextTick(() => {
        const arr = res.dataList || [];
        tableDataRef.value?.setTable({
          total: res.totalCount,
          table: [...arr],
        });
        data.chartsData = [...arr];
        data.chartsGunData = [...arr];
        data.isData = data.chartsData.length === 0;
        data.chartsType = '1';
      });
    }
  });
};

const getChartList = (page: any) => {
  getHistoryChargeData(data.startChargeSeq, page).then((res: any) => {
    nextTick(() => {
      const arr = res || [];
      // tableDataRef.value?.setTable({
      //   total: res.totalCount,
      //   table: [...arr],
      // });
      data.chartsData = [...arr];
      data.chartsGunData = [...arr];
      data.isData = data.chartsData.length === 0;
      data.chartsType = '1';
    });
  });
};

const getChart = () => {
  getHistoryChargeExtendData(data.startChargeSeq).then((res: any) => {
    nextTick(() => {
      const arr = res || [];
      if (arr.length == 0) {
        getChartList({ pageNo: -1, pageSize: -1 });
      } else {
        data.chartsType = '2';
        data.chartsData = [...arr];
      }
    });
  });
};

const back = () => {
  router.go(-1);
};

// tab切换
const handleClickTab = (e: any) => {
  if (e.props.name === 'charts') {
    getChart();
  }
};
</script>
<style lang="scss">
.order-detail {
  position: relative;
  .back-btn {
    position: absolute;
    right: 20px;
    top: 6px;
    z-index: 10;
  }
}
.order-wrap {
  .order-reason {
    display: flex;
    justify-content: space-around;
    font-weight: 500;
    font-size: 16px;
    color: #5073f7;
    width: 100%;
    margin-top: 20px;
    // padding: 0 100px;
    .order-no {
      width: 50%;
    }
  }
  .price-card {
    margin-top: 20px;
    width: 100%;
    height: 119px;
    background: linear-gradient(
      98.09deg,
      rgba(107, 164, 254, 0.36) 0%,
      rgba(67, 109, 255, 0.36) 73.83%
    );
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      width: calc(100% - 128px);
      .card-data {
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #ffff;
        align-items: center;
        .card-item {
          text-align: center;
          .iconfont {
            font-size: 36px;
            line-height: 36px;
          }
          .title {
            margin-top: 2px;
            color: #555555;
            font-weight: 400;
            font-size: 15px;
            line-height: 23px;
          }
          .card-value {
            margin-top: 8px;
            font-weight: 700;
            font-size: 36px;
            line-height: 44px;
            color: #5073f7;
          }
          .card-value1 {
            color: #292d32;
            display: flex;
            align-items: center;
          }
        }
        .card-item1 {
          display: flex;
          align-items: flex-end;
          .fee {
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            margin-left: 10px;
            margin-bottom: 6px;
            color: #5073f7;
          }
        }
      }
    }
    .right {
      width: 128px;
      height: 118px;
      background-image: url(@/assets/images/order-wallet.png);
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: 26px;
    }
  }

  .order-info {
    display: flex;
    justify-content: space-around;
    .order-detail {
      margin-top: 20px;
    }
  }
}
.charts-box1,
.charts-box2,
.charts-box3 {
  // background: #fff;
  border: 1px solid #b3c1f6;
  // width: cale(100% - 20px);
  width: calc(100% - 20px);
  margin: 20px 10px;
  height: 336px;
  box-sizing: border-box;
  .charts-warp {
    width: 100%;
    height: 100%;
  }
}
</style>
  